<template>
    <div class="jgList">
        <el-dialog title="交割记录" :visible.sync="jgSmallShow" width="1050px" :before-close="cancelBtn">
           
           <el-table
            :data="listRecord"
            style="width: 100%"
            @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column type="index" label="序号" align="center"></el-table-column>
                <el-table-column prop="date_of_trade" label="时间"></el-table-column>
                <el-table-column prop="wagon_number" label="装运车号"  width="120"></el-table-column>
                <el-table-column prop="delivery_num" label="交割数量" width="120"></el-table-column>
                <el-table-column prop="record" label="交割图片">
                    <template  slot-scope="scope">
                            <div v-for="(item,i) in scope.row.record" :key="i" class="down_look">
                                <span class="name_f">{{item.file_name}}</span>
                                <a :href="httpImage+item.file_path" target="_blank" download>
                                    <i class="el-icon-download"></i>
                                </a>
                                <svg-icon icon-class="eye-open" @click="openPic(item.file_path)"/>
                            </div>
                        </template>
                </el-table-column>
            </el-table>
            <div class="right_btn">
                <el-button type="primary" size="small" @click="affirm">确认</el-button>
                <el-button type="info" size="small" plain @click="cancelBtn">取消</el-button>
            </div>
        </el-dialog>

        <el-image-viewer style="z-index: 3000;" v-if="showViewer" :on-close="closeViewer" :url-list="urlList" />
    </div>
   
</template>

<script>
import {deliveryListLedger} from '@/api/release'
import {intervalTime} from '@/utils/index'
export default {
    components:{
        'el-image-viewer': () => import('element-ui/packages/image/src/image-viewer')
    },
    props:{
        jgSmallShow:[Boolean],
        idjg:[String,Number],
    },
    data(){
        return{
            showViewer:false,
            urlList:[],
            listRecord:[],
            idList:[],
            httpImage:'https://www.ympai.net'
        }
    },
    created(){
       
    },
    watch:{
        jgSmallShow:{
            handler(newval,oldval){
                if(newval){
                    this.getPageList();
                }
            }
        }
    },
    methods:{
        getPageList(){
            deliveryListLedger({id:this.idjg}).then(res => {
                var arr =res.data;
                arr.forEach(item =>{
                    item.date_of_trade=intervalTime(item.date_of_trade);
                })
                this.listRecord = res.data;
            });
        },
        handleSelectionChange(val) {
            if(val.length >0){
                val.forEach(item =>{
                    this.idList.push(item.id);
                });
            }
            
        },
        //预览图片
        openPic(img){
            this.urlList = [img];
            this.showViewer = true;
        },
        closeViewer(){
            this.showViewer = false;
        },
        affirm(){
            let ids = this.idList.join(',')
            this.$emit('colseJgList',ids);
        },
        //点击取消
        cancelBtn(){
            this.$emit('colseJgList');
        },
    }
}
</script>

<style lang="scss" scoped>
 .jgList{
    .down_look{
        color: #409EFF;
        cursor: pointer;
        .name_f{
            display: inline-block;
            width: 150px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            vertical-align: middle;
        }
        .el-icon-download{
            margin-right: 16px;
        }
    }
    .right_btn{
        text-align: right;
    }

 }
</style>
  